<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name=".slide-fadeiewport" content="width=de.slide-fadeice-width, initial-scale=1.0">
    <meta http-equi.slide-fade="X-UA-Compatible" content="ie=edge">
    <title>CSS动画</title>
</head>
<style>

    .bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

<body>
    <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <div v-if="show" align="center">
                <img src="img/u=3543839312,2262585839&fm=26&gp=0.jpg" alt="加载中。。。" width="1000px" height="600px">
            </div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>
        new Vue({
            el: '#example-2',
            data: {
                show:true
            }
        })
    </script>

</body>

</html>